<template>
  <div class="dashboard-editor-container">
    <div class="clearfix">
      <pan-thumb
        :image="'https://img0.baidu.com/it/u=3701805990,4185482718&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'"
        style="float: left"
      >
        你的身份为：
        <span v-for="item in roles" :key="item" class="pan-info-roles">系统管理员</span>
      </pan-thumb>
      <div class="info-container">
        <span class="display_name">{{ name }}</span>
        <span style="font-size:20px;padding-top:20px;display:inline-block;">系统管理员-后台面板</span>
      </div>
    </div>

    <div class="chart-container">
      <div class="chart-wrapper">
        <div id="pie-chart1" class="chart"></div>
        <div id="bar-chart" class="chart"></div>
        <div id="pie-chart2" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
import GithubCorner from '@/components/GithubCorner'
import * as echarts from 'echarts'
import { userData,clubData,eventData } from '@/api/statistics'

export default {
  name: 'DashboardEditor',
  components: { PanThumb, GithubCorner },
  data() {
    return {
      emptyGif: '../../public/bj.jpg',
      membersNum:1000,
      userCount:undefined,
    }
  },
  computed: {
    ...mapGetters(['name', 'avatar', 'roles'])
  },
  mounted() {
    this.createPieChart1()
    this.createBarChart()
    this.createPieChart2()
  },
  methods: {
    createPieChart1() {
      const chart = echarts.init(document.getElementById('pie-chart1'))
      userData().then(response => {
        const data = response.data.data;

// 计算 value 总和
const totalValue = data.reduce((sum, item) => sum + item.value, 0);

        const option = {
        title: {
          text: '平台用户统计',
          subtext: '平台共'+totalValue+'人',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['普通用户', '社团成员用户', '社团管理员', '系统管理员']
        },
        series: [
          {
            name: '用户类型',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data:    data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
        
      }
      chart.setOption(option)
      })

 

    
    },
    createBarChart() {
  const chart = echarts.init(document.getElementById('bar-chart'))
  clubData().then(response => {
    
  const option = {
    title: {
      text: '平台社团详情',
      subtext: '本平台共创建了'+response.data.clubNames.length+'个社团',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['成员总数', '发布通知数', '举办活动数','发布投票数'],
      align: 'left',
      orient: 'vertical',
      left: 10
    },
    grid: {
      top: '30%',
      left: '10%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: response.data.clubNames,
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
    interval: 0, // 强制显示所有横坐标标签
    // rotate: 90, // 旋转角度，根据实际需要调整
    formatter: function (value) {
      return value.split("").join(""); // 每个字符换行显示
    },
    color: 'blue' // 设置横坐标文字颜色为红色
  },
    },
    dataZoom: [
  {
    type: 'slider',
    show: true,
    bottom: 10,
    height: 12,
    backgroundColor: '#f5f5f5', // 滑动条背景颜色
    fillerColor: '#409eff', // 选中区域的颜色
    borderColor: '#dcdfe6', // 滑动条边框颜色
    handleIcon: 'path://M0,0 L10,0 L5,10 L0,0 z', // 滑块的图标路径
    handleSize: '100%', // 滑块的大小
    handleStyle: {
      color: '#fff', // 滑块的颜色
      borderColor: '#409eff', // 滑块的边框颜色
      borderWidth: 1 // 滑块的边框宽度
    },
    textStyle: {
      color: '#606266' // 文字的颜色
    }
  }
],
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '成员总数',
        type: 'bar',
        barWidth: '20%',
        data: response.data.joinCount
      },
      {
        name: '发布通知数',
        type: 'bar',
        barWidth: '20%',
        data: response.data.notificationCount
      },
      {
        name: '举办活动数',
        type: 'bar',
        barWidth: '20%',
        data: response.data.eventCount
      },
      {
        name: '发布投票数',
        type: 'bar',
        barWidth: '20%',
        data: response.data.voteCount
      }
    ]
  }

  chart.setOption(option)
});
}
,
createPieChart2() {
  const chart = echarts.init(document.getElementById('pie-chart2'))
  eventData().then(response => {
    
  const data = response.data.data;
  const option = {
    title: {
      text: '平台活动动态',
      subtext: '活动动态',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: ['未开始活动', '已完成活动', '举办中公共活动','举办中社团活动']
    },
    series: [
      {
        name: '活动动态',
        type: 'pie',
        radius: '50%',
        center: ['50%', '60%'],
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  chart.setOption(option)

  })
}
}
}
</script>
<style lang="scss" scoped>
.emptyGif {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.dashboard-editor-container {
  background-color: #e3e3e3;
  background-image: url('../../../../public/bj.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  padding: 50px 60px 0px;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.pan-info-roles {
  font-size: 20px;
  font-weight: 700;
  color: #fe0000;
  display: block;
}
.info-container {
  position: relative;
  margin-left: 20px;
}

.display_name {
  font-size: 24px;
  font-weight: 700;
}

.chart-container {
  margin-top: 30px;
}

.chart-wrapper {
  display: flex;
  justify-content: space-between;
}

.chart {
  flex: 1;
  height: 400px;
}

@media screen and (max-width: 768px) {
  .chart-wrapper {
    flex-direction: column;
  }

  .chart {
    width: 100%;
    margin-top: 20px;
  }
}
</style>